import QtQuick 2.15
import QtQuick.Controls.Material 2.15
import "./MyLib.js" as MyLib

Column {


    Rectangle {
        id: rect1
        radius: myWindow.myCounter
        rotation: myWindow.myCounter
        color: myWindow.myCounter > 90 ? "#ff0a91" : "green"
        width: 200
        height: 200

        Behavior on rotation {
            ParallelAnimation {
                NumberAnimation {
                    duration: 300
                    easing.type: "OutQuad"
                }
            }
        }
        Behavior on color {
            ColorAnimation {
                duration: 300
            }
        }

//        VideoOutput {
//            id: videoDisplay
//            anchors.fill: parent
//        }

//        CaptureSession {
//            id: captureSession
//            videoOutput: videoDisplay
//            camera: Camera {}
//            Component.onCompleted: {
//                this.camera.start()
//            }
//        }
    }

    anchors.centerIn: parent
    Text {
        id: label
        text: `ئاساسى كۆزنەك چوڭلۇقى: ${myWindow.width}x${myWindow.height}`
    }
    Text {
        text: "Counter: " + myWindow.myCounter
    }

    Row {
        Button {
            text: "Click me to ++"
            onClicked: {
                myWindow.myCounter++
            }
        }
        Button {
            text: "Click me to --"
            onClicked: {
                myWindow.myCounter--
                MyLib.sayHello()
            }
        }
    }

    Slider {
        value: myWindow.myCounter
        from: 0
        to: 100
        onValueChanged: {
            myWindow.myCounter = this.value
        }
    }

    Text {
        text: myWindow.myName == "" ? "ئىسمىڭىزنى كىرگۈزۈڭ" : "ياخشىمۇسىز " + myWindow.myName
    }
    TextEdit {
        width: 120
        height: 40
        text: myWindow.myName
        onTextChanged: {
            myWindow.myName = this.text
        }
    }

//        Canvas {
//            id: painter
//            width: 200
//            height: 200
//            function paintMethod(time) {
//                const context = painter.getContext("2d")
//                context.reset()
//                context.save()
//                context.rotate(myWindow.myCounter / 100 * 3.14)
//                context.fillText(myWindow.myName, 20, 20)
//                context.restore()
//                painter.requestAnimationFrame(this.onPaint)
//            }
//            onPaint: {
//                this.paintMethod(0)
//            }
//        }

}
